html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

/* MIXINS FOR ANIMATION */
/* Mixins to extend what Compass provides */
/* BALL STYLES */


.stage {
  width: 200px;
  height: 300px;
  display: inline-block;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  -ms-perspective: 1200px;
  -o-perspective: 1200px;
  perspective: 1200px;
  -webkit-perspective-origin: 50% -200px;
  -webkit-perspective: 50% -200px; /* Safari and Chrome */
  -moz-perspective-origin: 50% -200px;
  -ms-perspective-origin: 50% -200px;
  -o-perspective-origin: 50% -200px;
  perspective-origin: 50% -200px;
}

.ball {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin: 20px 10px;
  border-radius: 200px;
  position: relative;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
/*   background: -webkit-gradient(radial, 20% 80%, 0, 50% 80%, 100, color-stop(0%, #81e8f6), color-stop(10%, #76deef), color-stop(66%, #055194), color-stop(100%, #062745)); */
/*     background-color:green; */

/* background-image: linear-gradient(right bottom, rgb(153,29,231) 24%, rgb(184,56,255) 62%, rgb(221,84,255) 81%); */
/* background-image: -o-linear-gradient(right bottom, rgb(153,29,231) 24%, rgb(184,56,255) 62%, rgb(221,84,255) 81%); */

/*background-image: -moz-radial-gradient(72% 95%, black 5%, white 10%, black 90%),*/
/* background-image: radial-gradient(30% 50%, circle farthest-side, black 5%, silver 10%, black 90%); */

box-shadow: 0 0 10px 3px silver inset;

background-image:
    radial-gradient(circle closest-side at 50% 50%, 
                        #0000C0 10%, 
                        blue 72%,
                        #0000C0 78%,
                        gold 80%,
                        silver 85%,
                        white 95%);

/* background-image: -webkit-linear-gradient(right bottom, rgb(153,29,231) 24%, rgb(184,56,255) 62%, rgb(221,84,255) 81%); */
/* background-image: -ms-linear-gradient(right bottom, rgb(153,29,231) 24%, rgb(184,56,255) 62%, rgb(221,84,255) 81%); */

/*background-image: -webkit-gradient(
        linear,
        right bottom,
        left top,
        color-stop(0.24, rgb(153,29,231)),
        color-stop(0.62, rgb(184,56,255)),
        color-stop(0.81, rgb(221,84,255))
);*/

/*   background-image: */
/*   radial-gradient(20% 80%, circle farthest-side, white 4%, black 17%); */
/*   radial-gradient(45px 45px 45deg, circle closest-side at 40% 20%, silver 1%, black 40%); */
    
/*     radial-gradient(ellipse closest-side at 50% 20%, white 1%, green 80%); */
    
/*     radial-gradient(circle closest-corner at center 11%, rgba(255,255,255, .5) 0%, rgba(0, 0, 0, 0) 100%); */
/*     -webkit-gradient(radial, 20% 80%, 0, 50% 80%, 100, color-stop(0%, #81e8f6), color-stop(10%, #76deef), color-stop(66%, #055194), color-stop(100%, #062745)); */
  
/*    -moz-radial-gradient(40% 20%, circle cover, #81e8f6, #76deef 10%, #055194 66%, #062745 100%),
    -moz-radial-gradient(60% 90%, circle cover, #ffffff, rgba(255, 255, 255, 0) 20%);*/
    
         

    
/*   background: -o-radial-gradient(20% 80%, circle cover, #81e8f6, #76deef 10%, #055194 66%, #062745 100%); */
/*   background: radial-gradient(20% 80%, circle cover, #81e8f6, #76deef 10%, #055194 66%, #062745 100%); */
  background-size: 200px 200px;
}


.shadow {
  position: absolute;
  width: 200px;
  height: 200px;
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(50%, rgba(0, 0, 0, 0)));
  background: -webkit-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
  background: -moz-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
  background: -o-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
  background: radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
  -webkit-transform: rotateX(100deg) translateZ(-100px);
  -moz-transform: rotateX(100deg) translateZ(-200px);
  -ms-transform: rotateX(100deg) translateZ(-200px);
  -o-transform: rotateX(100deg) translateZ(-200px);
  transform: rotateX(100deg) translateZ(-200px);
  z-index: 1;
}

